<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-menu
          background-color="#b0bed9"
          text-color="#000"
          active-text-color="#fcfcfc"
          :default-active="editableTabsValue"
          router
        >
          <el-sub-menu :index="item.model_pk.toString()" v-for="item in store.state.admin.funList" :key="item.model_pk">
            <template #title>
              <el-icon>
                <setting v-if="item.model_pk == 1"/>
                <briefcase v-if="item.model_pk == 2"/>
              </el-icon>
              <span>{{item.model_name}}</span>
            </template>
            <template v-for="item2 in item.subList" >
              <el-menu-item 
              :index="item2.page_url"
               v-if="item2.type == 2" 
               :key="item2.t_fun_pk"
               @click="handleItemClick(item2)">{{item2.fun_name}}</el-menu-item>
            </template>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <el-tabs
            v-model="editableTabsValue"
            type="card"
            closable
            @tab-remove="removeTab"
            @tab-change="changeTab"
          >
            <el-tab-pane
              v-for="item in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
            >
            </el-tab-pane>
          </el-tabs>
          <div class="div-hello">
            <span>你好，{{ store.state.admin.admin_name }}</span>
            <el-button type="danger" size="small" @click="handleLogout"
              >退出</el-button
            >
          </div>
        </el-header>
        <el-main>
          <router-view v-slot="{ Component }">
            <keep-alive>
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script setup lang="ts">
import { ref,reactive } from "vue";

import { Briefcase, Setting } from "@element-plus/icons-vue";

import { ajax } from "@/util/request";

import { ElMessageBox } from "element-plus";

import { useRouter,useRoute } from "vue-router";

import { useStore } from "vuex";

const router = useRouter();
const store = useStore();

// // 管理员权限列表：用于生成菜单
// const funList = reactive([]);

// // 模拟异步请求
// setTimeout(() => {
//   let res = [
//     {
//       model_pk: "1",
//       model_name: "系统模块",
//       subList: [
//         {
//           fun_pk: "3",
//           fun_name: "管理员管理",
//           page_url: "/index/admin",
//           type: 2,
//         },
//         {
//           fun_pk: "6",
//           fun_name: "管理员增加",
//           page_url: null,
//           type: 3,
//         },
//         {
//           fun_pk: "7",
//           fun_name: "管理员修改",
//           page_url: null,
//           type: 3,
//         },
//         {
//           fun_pk: "8",
//           fun_name: "管理员删除",
//           page_url: null,
//           type: 3,
//         },
//         {
//           fun_pk: "9",
//           fun_name: "管理员授权",
//           page_url: null,
//           type: 3,
//         },
//         {
//           fun_pk: "11",
//           fun_name: "个人信息修改",
//           page_url: "/index/updateSelf",
//           type: 2,
//         }
//       ]
//     },
//     {
//       model_pk: "2",
//       model_name: "业务模块",
//       subList: [
//         {
//           fun_pk: "10",
//           fun_name: "内容管理",
//           page_url: "/index/content",
//           type: 2,
//         },
//         {
//           fun_pk: "12",
//           fun_name: "banner图管理",
//           page_url: "/index/banner",
//           type: 2,
//         }
//       ]
//     }
//   ]
//   funList.push(...res);
// },500)

// 退出系统
function handleLogout() {
  ElMessageBox.confirm("请确认是否退出，并返回到登陆页面。", "退出提示", {
    confirmButtonText: "退出",
    cancelButtonText: "取消",
    type: "info",
  }).then(() => {
    ajax("/login/adminLogout");
    store.commit("setAdmin", {});
    router.push("/login");
  });
}


// title/name
const editableTabs = reactive(new Array<any>());



function handleItemClick(item:any) {
  let flag = editableTabs.some(v => v.name == item.page_url);
  if (!flag) {
    editableTabs.push({title: item.fun_name,name: item.page_url});
  }
  editableTabsValue.value = item.page_url;
}

function removeTab(targetName:string):void {
  let index = editableTabs.findIndex(v => v.name == targetName);
  if (index != 0) {
    editableTabsValue.value = editableTabs[index - 1].name;
  } else {
    if (editableTabs.length >= 2) {
      editableTabsValue.value = editableTabs[1].name;
    }
  }
  editableTabs.splice(index,1);
  if (editableTabs.length == 0) {
    editableTabsValue.value = "/index"
  } 
}

function changeTab(value:string) {
  router.push(value);
}

let route = useRoute();
const editableTabsValue = ref(route.fullPath);
if (route.fullPath != "/index") {

}


</script>

<style scoped>
.el-menu {
  height: 100vh;
}

.div-hello {
  position: absolute;
  right: 20px;
  top: 8px;
  font-size: 12px;
}

.div-hello>span {
  padding-right: 5px;
}
</style>